import React, { useState } from 'react';
import ReactDom from 'react-dom';
import cssObj from '@/css/index.scss';
import bootCss from 'bootstrap/dist/css/bootstrap.css';
// import { FlavorForm } from '@/components/select';
import { Reservation } from '@/components/inputs';
// import "@/components/jzq";
// 为 sass/scss 启用模块化，第三方css直接全局使用。这样可以在class类名中直接使用字符串作为类名
// console.log('cssObj', cssObj);
function Hello(props) {
  let val = props.ks;
  // console.log('props', props);
  return <p>{val.name}</p>
}
let objA = {
  name: 'xxxx'
}
// React Hook
function HookExample() {
  // 声明一个叫 “counts” 的 state 变量,用setCountCounts来reset变量。useState的参数为初始值
  const [counts, setCountCounts] = useState(0);
  return (
    <div>
      <p>You clicked {counts} times</p>
      <button onClick={() => setCountCounts(counts + 1)}>
        Click me
      </button>
    </div>
  );
}
// 受控组件
class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};
  }

  handleChange = event => {
    this.setState({value: event.target.value});
  }

  handleSubmit = (event) => {
    alert('提交的名字: ' + this.state.value + val);
    // 阻止默认事件
    event.preventDefault();
  }
  ser = (val = 0) => {
    console.log('提交的名字: ' + val);
  }
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          名字:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="提交" />
        <p onClick={ () => this.ser(2) }>baidu.com</p>
      </form>
    );
  }
}
// 用 类 的方式创建组件
class Movie extends React.Component {
  constructor() {
    super();
    this.state = {
      bobo: 'imoto',
      text: ''
    }
  }
  render() {
  // this.state.bobo = '自定义的私有值可修改，props值为只读！';
  return <div className={cssObj.pgOne}>
          <input value={ this.state.text } onChange={ (e) => this.changeText(e) }/>
        </div>;
  }
  changeText = (e) => {
    this.setState({text: e.target.value});
  }
  setSta = async () => {
    console.log('this.bobo', this.state.bobo);
    await this.setState({bobo: 'new'});
    console.log('this.bobo', this.state.bobo);
  }

}
//#region name

// alert(111);
////#endregion name
ReactDom.render(
  <div>
    <button className="btn btn-primary">hello</button>
    <Hello ks={ objA }></Hello>
    <Movie {...objA}></Movie>
    <HookExample></HookExample>
    {/* <FlavorForm/> */}
    <NameForm/>
    <Reservation/>
  </div>
  , document.querySelector('#app'));